
<!doctype html>
<html lang="en">
<head>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-responsive.css">
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-responsive.min.css">
	<meta charset="UTF-8">
	<title>Picture Labelling Game</title>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script src="script.js"></script>
	
	<script src="js/button.js"></script>
	

</head>
<body>
	
	<div class="surroundAll">
		<a id="user" href="#">Logged in as </a>
		<a id="ranking" href="#">Current ranking: </a>
		<a id="exit" href="#">Log out</a>
		<div id="surroundingBox">
			<div id="header"><!-- Here goes User name, Score and Logout link -->
				<div id="info">
					<!-- code for username -->
					<!-- code for score -->
					<script src="bootstrap/js/bootstrap.js"></script>
					<script src="bootstrap/js/bootstrap.min.js"></script>
					
					<button class="btn btn-info btn-small" style="float:left;
						min-width: 90px;
						max-width: 200px;
						line-height:30px;
						height:40px;
						margin:5px;
						padding: 5px;
						font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
						font-weight: bold;
						color: black;
						text-shadow: 1px 1px 0 rgba(256,256,256,1.0);
						text-decoration:none;
						background: #56c2e1;
						border: 1px solid #fff;
						border-radius: 5px;
						
						box-shadow:  0 1px 3px rgba(0,0,0,0.50);
						-moz-box-shadow:  0 1px 3px rgba(0,0,0,0.50);
						-webkit-box-shadow:  0 1px 3px rgba(0,0,0,0.50);" 
						id="bg" data-placement='bottom' rel="tooltip" title="Background Image">
						Score: <div id="scoreNumber">1000</div>
					</button>
					
					<div class="bgform popover fade bottom in" style="">
						<div id="scoreBoard" style="	
						float:left;
						max-height:500px;
						min-height: 200px;
						margin:10px;
						padding:10px;
						min-width:200px;
						max-width:500px;
						background: #f3f3f3;
						border: 1px solid #fff;
						border-radius: 5px;
						
						box-shadow: 0 1px 3px rgba(0,0,0,0.5);
						-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
						-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);">
						
						</div>
					</div>
						<script>
						$("#bg").click(function(){
							$('.bgform').slideToggle();
						});
							
						</script>
						
					</br>
				</div>
			</div>
				
			<div id="tabooContainer">
				<!-- Taboo words container -->

			</div>
			
			<div id="pictureContainer">
				<img id="Picture" src"" />
				<!-- Picture container -->

								
			</div>
			
			<div id="answer">
				<input type="text" id="answer_textbox" placeholder="tag a pic ..."></input>
				<input id="add" type="submit" value="Add" onclick="addAnswer()"></input>
				<!-- User answer input -->
			</div>
			
			<div id="yourWordsContainer">
				
				
				<div id="stabilizer">
				</div>
				<div id="wordGroup">
				</div>
				
				<!-- User defined words container -->
				<input id="sendInput" type="submit" value="Send" onclick="sendAnswers()"></input>
				<input id="nextInput" type="submit" value="Skip" onclick="loadPicture()"></input>
			</div>
		</div>
	</div>
</body>
</html>